<template>
  <el-card class="aside_card">
    <el-menu class="sidebar-menu" :default-active="$route.path" :router="true" @select="handleSelect">
      <el-menu-item-group>
        <el-menu-item index="/category/backend/nodejs">Node.js</el-menu-item>
        <el-menu-item index="/category/backend/python">Python</el-menu-item>
        <el-menu-item index="/category/backend/php">PHP</el-menu-item>
        <el-menu-item index="/category/backend/java">Java</el-menu-item>
        <el-menu-item index="/category/backend/go">Go</el-menu-item>
        <el-menu-item index="/category/backend/mysql">UI</el-menu-item>
        <el-menu-item index="/category/backend/mysql">C++</el-menu-item>
        <el-menu-item index="/category/backend/mysql">C#</el-menu-item>
      </el-menu-item-group>
    </el-menu>
  </el-card>
</template>

<script>
export default {
  name: 'Sidebar',
  methods: {
    handleSelect(index, indexPath) {
      console.log(index, indexPath)
    }
  }
}
</script>

<style scoped>
.aside_card {
  margin-top: 40px;
  margin-left: 60px;
  width: 200px;
  background-color: #fff;
  top: 10px;
  bottom: 0;
  overflow-y: auto;
  z-index: 1;
}



.sidebar-menu {
  border: 0;
  padding-top: 0px;
  width: 100%;
}

.sidebar-menu .el-menu-item-group__title {
  font-size: 14px;
  font-weight: bold;
  color: #909399;
  padding: 10px 20px;
}

.sidebar-menu .el-menu-item__content {
  display: flex;
  align-items: center;
}

.sidebar-menu .el-menu-item__content i {
  font-size: 18px;
  margin-right: 10px;
}

.sidebar-menu .el-menu-item__content span {
  font-size: 14px;
}

.sidebar-menu .el-menu-item--active {
  background-color: #f5f7fa !important;
  color: #20a0ff !important;
}

.sidebar-menu .el-submenu__title {
  font-size: 14px;
  font-weight: bold;
  color: #909399;
  padding: 10px 20px;
}

.sidebar-menu .el-submenu__icon-arrow {
  font-size: 12px;
}

.sidebar-menu .el-submenu__title:hover {
  color: #20a0ff;
}

.sidebar-menu .el-submenu, .sidebar-menu .el-submenu .el-menu-item {
  background-color: #f5f7fa;
}

.sidebar-menu .el-submenu__title.is-active {
  color: #20a0ff !important;
}

@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
</style>